Special Edition Using HTML 4 - Ch 18 - Positioning HTML Elements 


Special Edition Using HTML 4 



-18- 

Positioning HTML Elements 

by Jerry HoneycutJ 

Understanding CSS Positioning 

In the desktop publishing world, layers are rectangular blocks of text and artwork that you can position anywhere on 
the page. You can also overlap layers so that one is hidden behind another or so that one bleeds through another. 
Publishers use layers to create some pretty awesome layouts. Take a look at any print advertisements or brochures, for 
example. Chances are, the publisher used layers. 

While desktop publishers might take layering for granted (even the simplest of desktop publishing programs allow you 
to create and overlap layers), HTML designers don't. Because HTML is streaming, they've never had the capability to 
overlap blocks of text and artwork. That is, each preceding HTML element is displayed before the next--in order. 
HTML has never provided for the positioning of an HTML element, much less for overlapping HTML elements. 

Until now-HTML 4.0 introduces the CSS positioning. If you're unsure of how to use style sheets, you should review 
Chapter 17, "Applying Cascading Style Sheets." 

Positioning an HTML Element 

You define an element's position using a style. Within a style's rule, you assign either relative or absolute to the 
position property. If you assign relative, the browser positions the element relative to its normal position (the 
location at which it would naturally appear). If you assign absolute to position, the browser positions the element 
relative to the parent container, whether it be the document or some other element, such as a <div> tag. In most cases, 
you use absolute* to place an element at an exact location relative to its parent. Use relative if you want to nudge an 
element slightly out of its normal location. 

You position an element using a style's top and left properties, like this: 

ffelern.smt [pos;.i uion: absolute; 'cop: 100; left: 20} 

When you assign the example style to an element, the browser positions it 100 pixels down and 20 pixels to the right of 
document's top, left-hand corner. 

left and top are represented in pixels, by default, and are relative to the top, left corner of the containing area within 
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the HTML document. For example, to position an element 10 pixels from the left edge of the browser window and 40 
pixels from the top edge, use left=io and top=40. The browser draws the HTML document as though the positioned 
element does not exist, and then the element is overlapped with the Web page at the given offset. You can also assign 
percentages to left and top, which represent a percentage of the parent container's width and height, respectively. 
Listing 1 8. 1 positions an element in the middle of the Web page. As shown in Figure 1 8. 1 , the contents of the HTML 
document bleed through the contents of the positioned element because it's transparent. 

Listing 18,1 Positioning an Element in the Middle of the Page 

<HTML> 
<H¥;AD> 

<TXTL1S>L.i<8f:ing CC. 1< /TITLE > 
</HEAD> : 

<STYI.-J3 TYPE« :,> t€Zt/css >- > 

jjoxemple (position: absolute; top: 40; left: 100} 
</STVTLE> 
<BODY> 

<IMG ID-'exainpie. SRC™ini t . gi;:> 

<?>You can position an element anywhere you 1 ike . </?> 

<P>This Element is positioned, however, so that it overlaps 

the HTML document below it. Notice how this text displays; 

through the :Unage s « transparent background. </p> 

<P>This element is positioned; however, so that it overlaps 

the HTML document below it. Notice how this text displays 

through the linage's transparent background. </P> 

<P.>This element: is positioned, however, so thai:, it overlaps 

the HTML .docuxaent below it. Notice how this; teat display.? 

through, the ixatfge ' s; t ransparex) t backg round . </P> 

<P>This element is positioned, however,- so that it overlaps 

the HTML document below it- Notice how this text displays 

through the image's transparent background </P> 

</BODY> 

</HTML> 

Tbw can position the element wherever you want on the browser window. 

Changing the Size of an Element 

You can change the height and width of the rectangular area occupied by an element. You use the width and height 
properties. Like top and left, you can assign a length or percentage to either of these properties. You can also assign 
auto to them and the browser automatically determines the appropriate width and height. 

#eieci:ent {position; absolu-re; top: 20; left: 20; width: 100; heigh t: 100] 

You don't use the width attribute to define the element's absolute width. This property suggests a width for purposes of 
wrapping the text contained within the element. If the text doesn't completely fill the element, however, the element is 
not actually as wide as the specified value. If you're inserting an image (or another element the browser can't wrap) 
inside an element, and the image is wider than the suggested width, the element's actual width is bigger than the 
suggested value. 


TIP: The overflow property determines what the browser does in the case that an element's contents are 
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larger than the element's size. Assign none, and the contents are not clipped. Assign clip, and the browser 
chops off the content to fit in the rectangular area. Assign scroll, and the browser allows you to scroll the 
window so you can see more of it. 


Listing 18.2 shows an example of an element that is 160 pixels wide and positioned 80 pixels from the top. As shown 
in Figure 1 8.2, the text wraps within the element, just like it would wrap within a table cell that's 160 pixels wide. 

Listing 18.2 Specifying the Width of an Element 

♦ 

> 

<HTML> 
<HEAD.> 

<T I TLE >SZ;ajapl e 2 < / TITLE > 

<S?*£LE TY;i?£""'t:«f.xt/css; ,, > 

#e:*:<:zapl/::: {position: absolute; top: BO; :U:!:t:: 40; width: 160} 
</STYLE> * : 
<SODY> 

This text is .wis hi r* the V/1'V tag. Notice how its 

length Is controlled by the width property, 
</OIV> i 
</BQDY> 
</MTML> ; 

....... .......... v , v ............. ....... 

TIP: You can use positioned elements to perform many of the same formatting tricks you've learned to do 
with the <table> tag. 


FIG, 18.2 

You can leave either the top or left attributes out, and the browser positions the element as though the omitted 
attribute is o. 


Overlapping Multiple Elements 

You can cause elements to overlap by setting each element's top and left attributes so that one appears on top of 
another. Figure 18.3 shows two elements. The first contains a handful of text and has a background image. The second 
element contains an image with a transparent background. The second element is positioned so that it overlaps the first 
(see Listing 18.3). 

Listing 18.3 Overlapping Elements 

<HTML> . • 

<HEAD> 

<TITLE>Szaroplfe 3</TITLE> 
</K£AD> 

<ST2LE TYPE^ >v te:<t/c.ss w > 

#e>:*rviple {position: absolute; top: 40; loft: 60} 

#ar!C5bh*er (position: absolute; top: 30; :U::':t; 200 J 
</STYLE> 
<BODY> 

<DIV I D- : e x amp 1 *a > 

<B>Thi« is tfis Ifixst layex . It 1 a behind the second layer.</BXBB> 
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<;l>Tb.is is the firs-; layer, Xt's behind the second layer. </BXBR> 

<B>Tki.s is the first lave-:, It's behind the second layer . </EXBR> 

<E>This. is the first layer. It's behind the second layer. </3><3R> 

<S>This is the first layer. It's behind the second layer. </3><BR> 

<B>?hiss is the first layer, it's behind the second layer. </«><BP> 

<BXrhis is the first. layer. It's behind the second layer. </BXBP> 

<B.>This is the first layer. It's behind the second layer . </BXBR> 
</DIV> ; 

<IMG i'D'-another SRC-init. . gif> 

</BODY> 

</HTML> 

FIG. 18,3 

Because the image in the second element has transparent areas, the content behind this element bleeds through. 


NOTE: By default, the browser draws overlapped elements in the order it encounters them. That is, it 
draws the first element, overlaps that with the next element, and so on. 


If you don't like the order in which the browser overlaps elements, you can change it. The most straightforward way is 
by using the z- index property, which defines the stacking order for elements: 

#exaraple {position: absolute; top: 100; left: 100; z- index: 1} 

You set this attribute to any positive integer value. An element with a stacking order larger than another draws over the 
other element. For example, an element with a stacking order of 10 overlaps an element with a stacking order of five. 
On the other hand, an element with a stacking order of three is overlapped by an element with a stacking order of five. 

Listing 18.4 is an example of three elements, each of which uses the z-index attribute to define its stacking order. The 
first has a stacking order of two; the second has a stacking order of one, and the third has a stacking order of three. 
Thus, the browser draws the second element first, the first element second, and the third element last, as shown in 
Figure 18.4. 

Listing 18.4 Using Z-INDEX 

<RTML> 

< T J. T LE > E x a nip 1 e 4 < /TITLE > 
</HEAD> 

< STYLE T7PE-' : text/oss ! \> 

llexl (position: absolute; top: 40; Ie::t: 60; s-index: 2} 
flex2 (position: absolute; top: 80; leiit: 200; s-ind*x: 1} 
Sex3 (position: absolute; top: 100; leilt: SO; index: 3} 

<BOD7> 

<DIV TD^ex!> 

<B>This is the first element, It'e ix; the middle ,</3><BR^ 

<B>This is the first element. It's in the middle . </3><BR> 

<B>This is the first, element. It's in the middle . </2><BR> 

<B>Thi- is the first element . It's in, the middle: . </B><BR> 

<£>This is the ;:irst element. It's in the ad dale , </BXB?.> 

<B>This is the Sirst element . It's in the middle . </BXRP.> 

<B>?his is the Hirst element. It's in the raiddl e , < / B > < BP. > 

<B>This is the first element. It's in the middle . </BXBR> 
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</DlV> 
<DZV ID-ex2; 
<B>This is 
<B>This is 
<&>This in 
<B>This i« 
<B>?his is 


i;3 
is 


<B>This 
<3>?his 
<B>This :t;s 

</DIV> 
<.TMG ID™e'x3 
</LAYER> 
</BODY> ; 

</HTML> 


the 
the 
the 
the 
the 
the 
the 
the 


second 
second 

CO -?.d 

second 
second 
second 
second 


layer , 
layer , 
I aye r , 

layer, 
layer, 
layer . 
1 oyer. 


sr<C«dnit:.gif> 


It's 
It's 
It Vs 
It-' s 
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It's 
It's 
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behind 
behind 
behind 
behind 
behind 
behind 
behind 
behind 


the 
the 
the 
the 
the 
the 
the 
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first 
first 

first: 
first 
first 
first 
first 
first 


layer 
layer 
layer 
layer 
layer 
layer 
layer 
lay ex 


</EXBR> 
</BXBR> 
</BXBR> 
</Bs<BR> 
<:/BXBP.> 
</B><BR> 

,<:/bxbr> 

,</SXBR> 


FIGJLM | 

The z- index property essentially defines the order in which each element is drawn. 


TIP: You can overlap several elements at the same position, define each element's stacking order in 
sequence, and then peel away the elements one at a time (using a script) to create a simple animation. 


Nesting Positioned Elements 

So far, you've only seen cases in which a handful of elements were added to the HTML document They were siblings 
in that one was not contained within another. You can insert one element inside another, however, to create a parent- 
child relationship. In that case, the child (inside) is relative to the parent (outside). Thus, if you position an element 
called parent and locate it at 10, 10; and nest an element inside of parent called child located at 5, 5; the child 
element actually displays at 15, 15 on the HTML document. If you move the parent element to 20, 20, the child 
element moves right along with it to 25, 25. 

Listing 18.5 shows you an example of nested elements. The parent element contains an image of a rough Christmas 
tree. It contains a number of nested elements that represent bulbs. The coordinates of each nested element are relative 
to the upper-left corner of the parent. If you moved the Christmas tree to another location on the Web page, the bulbs 
would move right along with it (see Figure 18.5). 

Listing 18.5 esting Elements 

<HTML,> 
<HEAD> 

<TITLE>EzaKtple J></TITLE> 
</KSAD> 

<:bod?> 

<D.T.V STYLF.="position: absolute; top: 100; left: !0G"> 
<I.MG 3RO-xtree.aif> 

<T.MG STYLE- "position : absolute; top: 140; left: 60" SRC=«b«i 1 1 . gif > 

<TMG STYLES "position: absolute; top: "20; left: 100" SRC« ! bal 12 . gif > 

<"IKQ STYLE-"position: absolute; top: 130; loft: 120" SRC«baiil . gif > 

<IMG STYL?>"position: absolute; top: 170; left: 140" SRC>ball2 . g i f > 

KG STYT,E- !! pos:.t:ion: absolute; top: 200; left: 120" SRC-bal.12 . g i f > 

<IMG ST.YIiS*« M positiori: absolute; top: &0; left: 80" SRC-ballS-gif > 

<IMG STY7 J S»« M positiOii: absolute; top: 0:0; left: 125" S?.Obali3- gif> 

<IMG 3TYLE-"po3itiGn: absolute; top: 200; left: 60" 3RC-ball3 . gif > 
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<IMG ST'VL^^";pO;5it:io:c): absolute; top: 200; left: 130" SROb« 1 1 3 • q± S:> 
</DIV> 
</BODY> 
</KTML> 

FIG. 18.5 

By capturing the mouse events for each bulb, you can allow the user to move the bulbs around on the Christmas tree. 

Positioning Elements with Scripts 

You get a lot of publishing capabilities just from being able to position an element anywhere on an HTML document 
and overlap it with others. You can create a variety of special effects, however, by attaching a script to an element and 
using that script to hide or show it-you can even move it around the browser window. 

Given an element's ID, you reference it using the object model (see Chapter 19, "Scripting the Object Model"), like 
this: 

dociXK-ent ."a 1 1 . item iid t G) 

id is the element's DD. The o indicates that you want the first occurrence of any element with that particular ID. 

To access one of the styles, use the style object by appending . style to the object representing the element; then 
append the name of the style you're accessing to the end of that. Here's an example: 

document . all , i teen {id, 0} . style .property 

Using a Script to Hide or Show an Element 

You can use a script to hide and show elements on the HTML document. For example, you can create an element that 
you only want to display when the user moves the mouse across an image. In that case, you'd set the element's 
visibility property to "hidden" so that it's not initially displayed. Then, in the image's onMouseover event, set the 
element's visibility property to "", like this: 

document. all, itec::- id, 0) . style -proper ty ::: !M \- 

Listing 18.6 shows you an example that does something similar. It uses JavaScript, but you can use another scripting 
language just as well. It contains three elements and three buttons. The script associated with each button toggles the 
visibility of each element. Click a button associated with a visible element and the script makes the element invisible 
(see Figure 18.6). 

Take a look at the function called ToggieFirst ( ) . It toggles the state of the flag called showFirst, which indicates 
whether the element called first is visible. It then sets the element's visibility property to "hidden" if showFirst 
is false; otherwise, it sets the property to "", which causes the element to become visible. 

Listing 18.6 Hiding and Showing Elements 

<HTML*> 
<\WXO> 

<T I T LIS >Sx a rap 1 e £</TXT LE > 
</KEAD> 

<3T2LE TYPE- ,k text/css k '> 
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# Hirst (position: absolute; top: 80; left: 60} 
#second {position: absolute; top: 120; lent: 200 = 
# third {position: absolute; top: 140; left.: 180} 
</STYLE> 

<8CR.l PT IJ^iGUAGg- JAVASCHI PT> 
Showr*ir:«t ;:: true; 
ShowSeccud™*! aise; 
ShowThird-tr\;e; 
function ToggieFirst () 
( 

Siiowfirst: - ! ShcvjFi rst; 

dociiK:ent.all,itera{"first ,, / 0) . style . visibility - SfcowFirst ? v " 
^hidden"; 

} 

function Toqgle Second ( ) 

{ [ 
ShowS.eoond :;: ! ShowSecond; 

docui&snt.?;Ii.item{"secoRd b ', 0 }. style . visibility - ShowSecond ? 

) : 

funct ion ToggleThi.ro ( ) 


: "hidden"; 


ShowThird ::: ! ShowThird; 
document .all', it era { " third • 
"hidden* ; 


0) .style. visibility 8kowThir.d ? 


</S0RIPT> 

<BODY> * ■ 

<DIV ID~first> 

<B>This is the first layer. It ! 

<B>This is the first layer. It' 

<B>This is the first layer. It' 

<B>This is the first layer. It' 

<B>This is the first layer. It' 

<£>This is the first layer. It' 


s in the middle . </3><BR> 

& in the middle . </B><BP> 

s in the Kiddie - </B><3?> 

s in the middle . </BXBr<> 

s in the [Kiddle . </BXBR> 

s in the middle . </BXBR> 

s in the middle . </B><BR> 


<B>This is the first layer. It 1 
<B>This is the iiiret layer. It's in the middle . </BXBR> 
</OIV> 

<DIV ID-seeond STYLE -"visibility : hidden "> 

<:3>?his is the second layer. It's behind the first layer . </BXBR> 
<B.>This is the second layer. It's behind the first layex .</BXBR> 
<B>This is the second layer. It's behind the first layer . </3><BR-> 
<B>?his is the second layer. It's behind the first layer . </3><BR.> 
<3>This is the second layer, it's behind the first: layer. </SXBR> 
<B>This is the second layer, It's behind the first layer. </BXBR> 
<B>This is the second layer, it's behind the first layer , </B><BK> 
<B>T his is the. second iUyej; , It's behind the first layer X/BXBP> 
</DIV> 

<IMG ID™ third SP.Oinit . gi f > 
< if CRM KAME-TOGGLS> 

<TABT,B ALIGtf^CBN?&£> 
<TD> 

<IW?UT NAMS'«FIRST T Y PE ::: BUTTON VALUF.^ Toggle First Lave?: » 
<:/td.> 
<:td> 

<IN:Vl;T NAMS5«S*;CONJ5 T Y P ft ™B CT'i'ON VMAJB-" Toggle Second Layer" 
</TO> 
<TD> 

<IM?l-T N T AMB™-TKI.RD TYPS™BUTTON VALUE--" Toggle Third Layer " 
</tD> 
</TABLB> 


onclick-^'ToggleJTirst (} ; ".> 


oncI:Lck^ ,f ToggleSecond ( } ; 


oxiclick ! «"TcggleThird{ } ; "> 
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</BOI..'Y> 
</h'TML> 


FIG. 18.6 

As you click buttons to hide an element, the browser peels that layer away, unveiling what's underneath. 


TIP: In Windows, you've seen dialog boxes that contain a button with the text More». When you click 
that button, additional fields are presented; You can achieve the same effect in an HTML form by attaching 
a script to a form's button that shows another form hidden within a <div> tag. 


Moving an Element with a Script 

Besides showing and hiding an element, you can also move it around on the Web page. You can use this to create some 
pretty fancy animation, such as a curtain that appears to open, unveiling the contents of the page. Moving an element 
around is easy. You set the value of the left and top properties (using posLef t and posTop so that you don't have to 
change the length as a string with units), as shown in Listing 18.7 and Figure 18.7. 

This example contains two elements. It also contains four buttons, label up, Down, Left, and Right, Each button is 
associated with a function that moves the second element in the appropriate direction. For example, the up function 
subtracts 10 from the second element's top property, which has the effect of moving the element up 10 pixels. The 
Right function adds 10 to the second element's left property, which has the effect of moving the element right 10 
pixels. 

Listing 18.7 Moving an Element with a Script 

<:html> 

<HEAD> 

<?.T?I,K>Sxample 7</TITLVJ> 
<SCRIPT LANGUAGE -JA VA3CK.V PT> 
function Up{}„ 

i 

document .ail. it em {"second", 0 s » style . posTop ••- 10; 

} 

£unctio:n Down ( j 
{ 

dccurcsnt . . item { "second", 0} . style . posTop 10; 

] 

function Lei:;:. (} 

i 

document, all', item { "second", 0) . style. posLeft 10; 

function Right ( ) 
{ 

docuraeut.&Il, i tecs ("secoad", 0) . st vie, pes Left *•«: 10; 

} 

</SCRIPT> 

<7K£AD> 

<SOOY> 

<D1'V sa , YLS=« ,, poQi.tior:: absolute; top: 2 00; Iej!i;: 300 M ; border: 2 !? > 
<B>This is the first layer. It's always on top . </BXBR> 
<B>7his iss the first layer. It's always on top . </BXBI<> 
<B>This is the first layer- It *s -always on top . </BX3R> 


http://web.archive.org/web/19991 1 1406291 5/http://docsjinet.ru/HTML4/chl8/chl 8.htm 


8 


Special Edition Using HTML 4 « Ch 18 - Positioning HTML Elements 


t:op.</B><3?> 
top . </B><3R> 
top.</BX3R> 
top . </BX'3R> 
top,</B><BR> 
top. </BXBR> 


180; left.: 0; z-order: 1 <! SRC«init . gif > 


<B>TJiis is the first: layer. It's aiwsys on 
<B>?hxs is the 'first layer. It's always on 
<B>This is the first layer. "It's always- on 
-3>This is the first layer- "It's always on 
<E>Thi~ i« the first layer- It's always- on 
<B>Th:Li; is the Hirst layer. It's; always on 
</DIV> 

<IMG ID-second STYLE- w po3ition: absolute;' top: 
<FQRM NAME ^BUTTON S> 
<TABLrJ> 
<TR> 

<TDX7TD> 

<TD ALI GN~CB>}T£R> 

< INPUT WIDTIi-lQOi NAME**VP TYPE-BUTTON VALUE- "Up" onclick«"Up v 5 ; "> 
</TD> i 

<tv»</td>; 

</TR> : 

<TR> j • 

<TD ALI G>(~CENTER> 

<IWPUT NAMJS-LSfJFr T Y PIS-BUTTON VALUK""!.© f t J: onol i ck«"Lef t { } ; "> 

</TD> 

<TDX/TD.> 

<TD AL I GVJF !!: CENT E R > 

<INPUT WI.DTH-iQG MAMS -RIGHT TYPE -BUTTON VALUE -"Right" ORClick-"Right ; ) ; "> 
</TD> .' 

<TR> 

<TDX/TD> 

<TD AL I GN - C £ NTE R > 

<.V.NPUT WIDTH-100 NAMS«DOV*N TYPE "BUTTON VAiiUiK^'Tjown " onclick«"Down { } ; "> 

</TD> 

<TDX/TD> 

</TP.> 

< /TABLE > : 

</FORM> 

</KTML> 


Expanding Forms: An Example 

There are two types of users in this world: basic and advanced. With forms, you find many cases in which a basic user 
needs to fill in only a few of the simpler fields, while the advanced user needs to fill in all of the fields, including the 
more advanced fields. 

You can display all of the form's fields at one time and let the basic user ignore the advanced fields or you can hide the 
advanced fields and let the advanced user get to them by clicking a special button. The latter is the approach that 
Windows 95 and Windows NT 4.0 take in many cases. Have you ever seen a dialog box in Windows with a button 
labeled Advanced or More? When the user clicks one of these buttons, the dialog box unfolds to show more fields. 

With CSS positioning, hiding a portion of a form until a user clicks a button is easy. Listing 18.8 is just such an 
example. At the bottom of this HTML document, you see a portion of the form sandwiched in a <div> tag. The <div> 
tag's visibility property is initially set to "hidden". The function openMore toggles the visibility of the hidden 
portion of the form and changes the text displayed in the button to reflect the state of the form. 

FIG, 18,7 
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As you move the second element by the first, it disappears under the first element, because the second element has a 
larger z -order. 

Listing 18.8 Expanding a Form 

<HTML> . 
<HEAD> 

<TrrLE>F 4 JK<isaple 8</TXTiiJ£> 
<SCRIPT lANGUAG;^u7AVASCRI?T> 
bitiMorelsUp *« false; 

// Display the Ridden fossa i.f it's not already displayed. Otherwise, hide it. 

// Also, change the text, in the button to reflect the current state of the hidden form, 

function. 'OoenMove- } 

( j 

blriMoHlsUfc ::: IblnMorelsUp; 

ciocyKierit. all. item ("MORS*', Oi . style . visibility - bir;More!sUp ? : "hidden"; 
document •FEEDBACK. FEEDBACK MORE . value - binXorelsUp ? H Less« n : "More»"; 

i ! 

</SCRIP?> 

</KSAD> 

<EODY> 

< FORM NAME -FEEDBAO K METHOD-GET ACTION** "-mail to ; 1 err yghcneycutt . coKi" OnSubiait«'' ret.urn XsVaixd ( > 
< TABLE CELLPADOING"! 0> 
<TR> 

<TD VAX.IGN^TO?> 

<B>Fiease provide your e-mail address : </BXER> 
<INFJ? NAME-FEEDBACK MAIL TYPE-TEXT SI2£=4G> 
</TO> 

<B>How t .dic. you i:i:nci our si he : </BXBR-> 
<3ELF.CT NAME« ! FF*EwBACK_HOW SXSF:« ! 1> 
<OPTICN VALUS=l>AltaVista 
<OPTTON VALl;E~2>«xcite 
<OPTXONf VAU;E«'3>Lyoos 
<OPTIOVf VAU;E="4>"f cihoo 1 
<:OPTXON VALUE-'!>>^ebCrawier: 
^OPTION VALUE — 6 > Friend 
<OP?ION VALUE^7>other T,ir;.k 
</SSLECT> 
</TD> 
<TR> 

<TD VAL I GN — TO P ROW3PAW-2> 

<B.>Teli u;? wha;:. you think afooxn: our Web site : </BXBR> 

<?£XTAREA NAME -FEEDBACK MEMO COX:S ::; 4 5 PGwS~8> ' 

< / Ti/; XTAR E A > 
</TD> 

<?D VALISW-TOP> 

<B>How did we rate?</BXBP> 
<TABLE .BOPDER«'I> 
<TR ALIGN ™CF.OTKP> 

<THX/THXTH>Yes</TH><:TH>No</TH> 
</TR> 

<TP. ALIGN«CBOTSR> 
<TD ALIGN- LEFT> 

Did this site load fast enough? 
</TD> 
<:td> 

<inpl;t n ame ~ fe e dback speed type-radio 

</fD> 
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<TD> 

<IN?UT NftMS^rSSDBACK^SFSED T Y PE ::: RAD T. O > 
</TD> 
</TR> 

<TR ALIGN-CEN7EP> 
<TD ALTGW^L£FT> 

Did you firsd the graphics interesting? 
; </TD> 
: <TD> 

<TN?UT MAMn. ~ F& &DBACK G P A?H I C T Y PE "RAD X O > 
<TD> 

: <INPUT W^^FSSr-BACK^GRAPKIC TYPE«RABIG> 

</XD> 
</TR> 
I <TR ALIGN ^ENTEP> 

| <TD ALT GN ::: LE FT > . \ 

j #33 the content suitable? 

</TD> : 

<TD> 

<INPUT NAME ::: E& E L'BACK ^ CO>iT 11' NT T Y PE ::: R AD I O > 
</TD> 
<TD> 

<J INPUT S^AMS-FSSDBACK CONTENT TYPE^RADIO> 
</TD> 
</TR> 
; <:/ TABLE > 
</TD> 
</TR> 

<TV< ALI GN~ Yd GRT > 
<*TD> 

< TABLE WIDTH«-a00i-> 
<TD tAL.I GN ::: LE F*T> 

<IKPUT N-"J V 1^ —FEEDBACK MO I<E TYPE -BUTTON VALUE = "Mo r &» y * OnCl ick- v 'OperiMor 

</TD> 
<TD> 

: < INPUT NAME ::: FE E DB A.CK_RE S E T , T Y ?E ::: RF; GET VALUE- Ci ear > 

-CINPUT NAME ::: FEEDB ACK_SUBMI T TYPE-SUBMIT VALUE ub-ni t > 
</TD>. 

< /table > 

</TD> 

<:/TR> 

</ TABLE > 

<\ This Di'V contains the hidden part of the form that the user sees when they click 

<X)XV I;>~ttORE STYLS« 8, vii6i.S.bility: hidder:"> 
< TABLE CELLPALDXNG-10> 
<TP> 
<TD> 

<3>Type the URL of your home poge : </B><BR> 

<INPUT NAMif;^FEEDBA.CK URL TYPE-TEXT 3T3E-60> 
</TD> 
<TD> - • 

<B>Type you?: phone nuxtiber : </B><BR> 
<INi?CT NAMS— 2'E £ DEACK PHONE TYPE-TEXT SIZE-32> 
</TD> 
</TP> 
</ TABLE > 
</DIV> 
<7iTORM> 
</BODY> 
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</K?ML> 

Figure 18.8 shows the resulting form with the hidden form expanded. 
FIG. 18.8 

If the user clicks Less« to hide the advanced fields, the browser still keeps any data that the user typed in these fields. 



J^^^Yxt'** COM P A M Y 
© Copyright. Macmillan Computer Publishing. All rights reserved. 
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This ^ specification defines the HyperText Markup Language (HTML), the publishing 
language of the World Wide Web. This specification defines HTML 4.01 , which is a 
subversion of HTML 4. In addition to the text, multimedia, and hyperlink features of 
the previous versions of HTML (HTML 3.2 [HTML32] [p.356] and HTML 2.0 
[RFC1866] [p.356] ), HTML 4 supports more multimedia options, scripting 
languages, style sheets, better printing facilities, and documents that are more 
accessible to users with disabilities. HTML 4 also takes great strides towards the 
internationalization of documents, with the goal of making the Web truly World Wide. 

HTML 4 is an SGML application conforming to International Standard ISO 8879 - 
Standard Generalized Markup Language [IS08879] [p.353] . 
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16.1 Introduction to frames 

HTML frames allow authors to present documents in multiple views, which may be 
independent windows or subwindows. Multiple views offer designers a way to keep 
certain information visible, while other views are scrolled or replaced. For example, 
within the same window, one frame might display a static banner, a second a 
navigation menu, and a third the main document that can be scrolled through or 
replaced by navigating in the second frame. 

Here is a simple frame document: 

<!DOCTYPE HTML PUBLIC " - / /W3C//DTD HTML 4.01 Frameset //EN" 

"http://www.w3 .org/TR/html4/f rameset .dtd n > 
<HTML> 
<HEAD> 

<TITLE>A simple frameset document </ TITLE > 
V/HEAD> 

< FRAMESET cols="20%, 80%">- 
< FRAMESET rows="100, 200 n > 

< FRAME src= "contents_of_f ramel .html" > 

< FRAME sr c= " cont ent s_of _f rame 2 . gi f " > 
</FRAMESET> 

< FRAME src="contents_of_f rame3 .html 11 > 
< NOFRAMES > 

<P>This frameset document contains: 

<UL> 

<LI><A hre f = " cont ent s_of_f ramel. html" >Some neat contents</A> 
<LIxIMG src="contents_of_frame2 .gif " alt="A neat image" > 
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<LI><A href = "contents_of_f rame3 .html" >Some other neat contents</A> 
</UL> 
< /NO FRAMES > 
</FRAMESET> 
</HTML> 

that might create a frame layout something like this: 


Frame 1 


Frame 3 


I Frame 2 


If the user agent can't display frames or is configured not to, it will render the 
contents of the noframes element. 


An HTML document that describes frame layout (called a frameset document) has a 
different makeup than an HTML document without frames. A standard document has 
one head section and one body. A frameset document has a head, and a 
frameset in place of the body. 

The frameset section of a document specifies the layout of views in the main 
user agent window. In addition, the frameset section can contain a noframes 
element to provide alternate content [p.214] for user agents that do not support 
frames or are configured not to display frames. 

Elements that might normally be placed in the body element must not appear 
before the first frameset element or the frameset will be ignored. 


16 2 A The prakssET element 


V< i [ %HTML. Frameset •' ' [ 
< [ELEMENT FRAMESET - - ( (FRAMESET | FRAME) + & NOFRAMES?) -- window subdivision- - > 
< ! ATTLIST FRAMESET 

%coreattrs; -- id, class, style, title 

rows %MultiLengths,- #IMPLIED list of lengths, 

default: 100% (1 row) -- 
cols %MultiLengths; #IMPLIED -- list of lengths, 

default: 100% (1 col) -- 
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onload %Script; #IMPLIED all the frames have been loaded -- 

onunload %Script; #IMPLIED all the frames have been removed -- 

Attribute definitions 

rows = multi-length-list [p.52] [CN] [p.49] 

This attribute specifies the layout of horizontal frames. It is a comma-separated 
list of pixels, percentages, and relative lengths. The default value is 100%, 
meaning one row. 

cols = multi-length-list [p.52] [CN] [p.49] 

• This attribute specifies the layout of vertical frames. It is a comma-separated list 
of pixels, percentages, and relative lengths. The default value is 100%, meaning 
one column. 

Attributes defined elsewhere 

• id, class (document-wide identifiers [p.71] ) 

• title (element title [p.63] ) 

• style (inline style information [p. 186] ) 

• onload, onunload (intrinsic events [p.254] ) 

The frameset element specifies the layout of the main user window in terms of 
rectangular subspaces. 

Rows and columns 

Setting the rows attribute defines the number of horizontal subspaces in a frameset. 
Setting the cols attribute defines the number of vertical subspaces. Both attributes 
may be set simultaneously to create a grid. 

If the rows attribute is not set, each column extends the entire length of the page. 
If the cols attribute is not set, each row extends the entire width of the page. If 
neither attribute is set, the frame takes up exactly the size of the page. 

Frames are created left-to-right for columns and top-to-bottom for rows. When 
both attributes are specified, views are created left-to-right in the top row, left-to-right 
in the second row, etc. 

The first example divides the screen vertically in two (i.e., creates a top half and a 
bottom half). 

< FRAMESET rows="50%, 50%"> 
...the rest of the definition. . . 
</FRAMESET> 

The next example creates three columns: the second has a fixed width of 250 
pixels (useful, for example, to hold an image with a known size). The first receives 
25% of the remaining space and the third 75% of the remaining space. 
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< FRAMESET COls= » 1 * , 250 , 3* » >• 

. . . the rest of the definition, . . 

</FRAMESET> 

The next example creates a 2x3 grid of subspaces. 

*<FRAMESET rows= "3 0% , 70% " cols="33%, 34%, 33%" > 
. . . the rest of the definition. . . 
</FRAMESET> 

For the next example, suppose the browser window is currently 1000 pixels high. 
The first view is allotted 30% of the total height (300 pixels). The second view is 
specified to be exactly 400 pixels high. This leaves 300 pixels to be divided between 
the other two frames. The fourth frame's height is specified as "2*", so it is twice as 
high as the third frame, whose height is only "*" (equivalent to 1*). Therefore the third 
frame will be 100 pixels high and the fourth will be 200 pixels high. 

< FRAMESET rows= "30% , 400 , * , 2* " > 
...the rest of the definition. . . 
</FRAMESET> 

Absolute lengths that do not sum to 100% of the real available space should be 
adjusted by the user agent. When underspecified, remaining space should be 
allotted proportionally to each view. When overspecified, each view should be 
reduced according to its specified proportion of the total space. 

Nested frame sets 

Framesets may be nested to any level. 

In the following example, the outer frameset divides the available space into 
three equal columns. The inner frameset then divides the second area into two 
rows of unequal height. 

*< FRAMESET cols="33%, 33%, 34%"> 

. . .contents of first frame. . . 
<FRAMESET rows="40%, 50%"> 

...contents of second frame, first row... 

. . .contents of second frame, second row. . . 
</ FRAMESET > 

. . .contents of third frame. . . 
</FRAMESET> 

Sharing data among frames 

Authors may share data among several frames by including this data via an object 
element. Authors should include the object element in the head element of a 
frameset document and name it with the id attribute. Any document that is the 
contents of a frame in the frameset may refer to this identifier. 

The following example illustrates how a script might refer to an object element 
defined for an entire frameset: 
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<!DOCTYPE HTML PUBLIC " - / /W3C//DTD HTML 4.01 Frameset //EN" 

"http: //www. w3 .org/TR/html4/ frameset . dtd" > 
<HTML> 
<HEAD> 

<TITLE>This is a frameset with OBJECT in the HEAD</TITLE> 
<!-- This OBJECT is not rendered! --> 
<OBJECT id= n myobject" data= "data . bar" ></OBJECT> 
♦</HEAD> 
<FRAMESET> 

< FRAME src= "bianca.html 11 name = "bianca" > 
</FRAMESET> 
</HTML> 

<!-- In bianca.html --> 
<HTML> 1 
<HEAD> 

<TITLE>Bianca ' s page< /TITLE > 
*</HEAD> 
<BODY> 

. . . the beginning of the document . . . 
<P> 

<SCRIPT type= "text/ javascript "> 
parent .myobject .myproperty 
</SCRIPT> 

. . . the rest of the document . . . 

</BODY> 

</HTML> 


' < ! t %HTML '. Frameset ; [ 

<!-- reserved frame names start with 11 
< ! ELEMENT FRAME - O EMPTY 
< ! ATTLIST FRAME 
%coreattrs; 

longdesc %URI; #IMPLIED 

name CDATA # IMPLIED 

src %URI; #IMPLIED 

frameborder (l|0) 1 

marginwidth %Pixels; #IMPLIED 

marginheight %Pixels; #IMPLIED 

noresize (noresize) #IMPLIED 
scrolling (yes | no | auto) auto 
> 

]]> 


otherwise starts with letter --> 

- subwindow --> 

- id, class, style, title 

- link to long description 
(complements title) 

- name of frame for targetting -- 

- source of frame content 

- request frame borders? -- 

- margin widths in pixels 

- margin height in pixels 

- allow users to resize frames? -- 

- scrollbar or none -- 


Attribute definitions 


name = cdata [p.50] [CI] [p.49] 

This attribute assigns a name to the current frame. This name may be used as 

the target of subsequent links, 
longdesc = uri [p.51] [CT] [p.49] 

This attribute specifies a link to a long description of the frame. This description 

should supplement the short description provided using the title attribute, and 
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may be particularly useful for non-visual user agents, 
src = ur/[p.51] [CT] [p.49] 

This attribute specifies the location of the initial contents to be contained in the 

frame, 
noresize [CI] [p.49] 

When present, this boolean attribute tells the user agent that the frame window 

must not be resizeable, 
scrolling = auto | yes | no [CI] [p.49] 

This attribute specifies scroll information for the frame window. Possible values 

• auto : This value tells the user agent to provide scrolling devices for the 
frame window when necessary. This is the default value. 

• yes : This value tells the user agent to always provide scrolling devices for 
the frame window. 

• no : This value tells the user agent not to provide scrolling devices for the 
frame window. 

frameborder = 1 1 0 [CN] [p.49] 

This attribute provides the user agent with information about the frame border. 
Possible values: 

• l : This value tells the user agent to draw a separator between this frame 
and every adjoining frame. This is the default value. 

• o : This value tells the user agent not to draw a separator between this 
frame and every adjoining frame. Note that separators may be drawn next 
to this frame nonetheless if specified by other frames. 

marginwidth = pixels [p.52] [CN] [p.49] 

This attribute specifies the amount of space to be left between the frame's 
contents in its left and right margins. The value must be greater than zero 
(pixels). The default value depends on the user agent. 

marginheight = pixels [p.52] [CN] [p.49] 

This attribute specifies the amount of space to be left between the frame's 
contents in its top and bottom margins. The value must be greater than zero 
(pixels). The default value depends on the user agent. 

¥ 

Attributes defined elsewhere 

• id, class (document-wide identifiers [p.71] ) 

• title (element title [p.63] ) 

• style (inline style information [p.186] ) 

The frame element defines the contents and appearance of a single frame. 

Setting the initial contents of a frame 

The src attribute specifies the initial document the frame will contain. 
The following example HTML document: 


24 Dec 1999 18:26 


210 


Frames in HTML documents 


*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset/ /EN " 

"http://www.w3 . org /TR/ html 4/ frameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>A frameset document < /TITLE > 
</HEAD> 

< FRAMESET Cols= "33% , 33% , 33% » > 
< FRAMESET rows= "* , 2 00 » > 

< FRAME src= 11 content s_of_f ramel .html n > 
< FRAME src= " content s_of_f rame2 .gif " > 
* </FRAMESET> 

< FRAME src= " content s_of_f rame3 . html" > 
< FRAME src= " content s_of_f rame4 . html"> 
</FRAMESET> 
</HTML> 

should create a frame layout something like this: 


| Frame 

1 

| Frame 3 

| Frame 4 

| Frame 

2 




and cause the user agent to load each file into a separate view. 

The contents of a frame must not be in the same document as the frame's 
definition. 

ILLEGAL EXAMPLE: 

The following frameset definition is not legal HTML since the contents of the second 
frame are in the same document as the frameset. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN n 

"http://www.w3 . org/TR/html4/ frameset .dtd" > 
<HTML> 
<HEAD> 

<TITLE>A frameset document< /TITLE > 
</HEAD> 

< FRAMESET COls= "50% , 50% " > 

< FRAME src= " content s_of_f ramel .html" > 
< FRAME src="#anchor_in_same_document n > 
< NO FRAMES > 
. . . some text . . . 

<H2xA name= n anchor_in_same_document n >Important .section</Ax/H2 > 
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. . . some text ... 

</NOFRAMES> 
^</FRAMESET> 
*</HTML> 

Visual rendering of a frame 

The following example illustrates the usage of the decorative frame attributes. We 
specify that frame 1 will allow no scroll bars. Frame 2 will leave white space around 
its contents (initially, an image file) and the frame will not be resizeable. No border 
will be drawn between frames 3 and 4. Borders will be drawn (by default) between 
frames 1, 2, and 3. 

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset //EN" 

"http://www.w3 .org/TR/html4/f rameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>A frameset document< /TITLE > 
</HEAD> 

< FRAMESET COls= "33% , 33% , 33% " > 
< FRAMESET rows="* , 2 00" > 

< FRAME src=" content s_of_f ramel .html" scrolling="no" > 
< FRAME src="contents_of_f rame2 .gif " 

ma r g i nw i d t h= " 1 0 " ma rg inhe igh t = " 1 5 " 
noresize> 

</FRAMESET> 

< FRAME src="contents_of_f rame3 .html" f rameborder="0"> 

< FRAME src="contents_of_f rame4 .html" f rameborder="0"> 
</FRAMESET> 
</HTML> 

Wofe. For information about current practice in determining the target of a frame, 
please consult the notes on frames [p.350] in the appendix. 

Attribute definitions 

target = frame-target [p.57] [CI] [p.49] 

This attribute specifies the name of a frame where a document is to be opened. 

«■ 

By assigning a name to a frame via the name attribute, authors can refer to it as the 
"target" of links defined by other elements. The target attribute may be set for 
elements that create links (a, link), image maps (area), and forms (form). 

Please consult the section on target frame names [p.57] for information about 
recognized frame names. 

This example illustrates how targets allow the dynamic modification of a frame's 
contents. First we define a frameset in the document frameset . html, shown here: 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset //EN" 

"http: //www. w3 .org/TR/html4/frameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>A frameset document</TITLE> 
"</HEAD> 

< FRAMESET rows= " 50% , 50% " > " 

< FRAME name= n fixed" src= M init_f ixed.html n > 

< FRAME name= "dynamic" src="init_dynamic.html"> 
</FRAMESET> 
</HTML> 

Then, in init__dynamic . html, we link to the frame named "dynamic". 

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transit ional//EN n 

"http: //www.w3 .org/TR/html4/ loose. dtd" > 
<HTML> 
<HEAD> 

<TITLE>A document with anchors with specific targets</TITLE> 

</HEAD> 

<BODY> 

. . .beginning of the document . . . 
<P>Now you may advance to 

<A href ="slide2 .html" target= "dynamic " >slide 2.</A> 
. . .more document. . . 
*<P>You're doing great. Now on to 

<A href ="slide3 .html" target= "dynamic" >slide 3.</A> 
</BODY> 
</HTML> 

Activating either link opens a new document in the frame named "dynamic" while 
the other frame, "fixed", maintains its initial contents. 

Note. A frameset definition never changes, but the contents of one of its frames 
can. Once the initial contents of a frame change, the frameset definition no longer 
reflects the current state of its frames. 

There is currently no way to encode the entire state of a frameset in a URI. 
Therefore, many user agents do not allow users to assign a bookmark to a frameset. 

Framesets may make navigation forward and backward through your user agent's 
history more difficult for users. 

Wh en hi any li h ks in the sa rn e d bcu rh eh t d esigh aite the same target, it is possible to 
specify the target once and dispense with the target attribute of each element. 
This is done by setting the target attribute of the base element. 

We return to the previous example, this time factoring the target information by 
defining it in the base element and removing it from the a elements. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ional// EN" 
- ■ "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD> 
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<TITLE>A document with BASE with a specific target</TITLE> 
<BASE href ="http: //www. mycom. com/Slides" target =" dynamic" > 
</HEAD> 
<BODY> 

. . .beginning of the document. . . 

<P>Now you may advance to <A href = M slide2 .html" >slide 2.</A> 
. . . more document . . . 
,<P>You're doing great. Now on to 

<A href ="slide3 .html">slide 3.</A> 

</BODY> 
</HTML> 


; I S 3 ^ ; 

User agents sh^ target frame in which to load a linked resource 

according to the following precedences (highest priority to lowest): 

1 . If an element has its target attribute set to a known frame, when the element 
is activated (i.e., a link is followed or a form is processed), the resource 
designated by the element should be loaded into the target frame. 

2. If an element does not have the target attribute set but the base element 
does, the base element's target attribute determines the frame. 

3. If neither the element nor the base element refers to a target, the resource 
designated by the element should be loaded into the frame containing the 

. element. 

4. If any target attribute refers to an unknown frame f, the user agent should 
create a new window and frame, assign the name f to the frame, and load the 
resource designated by the element in the new frame. 

User agents may provide users with a mechanism to override the target 
attribute. 


Authdrs should supply alternate 6^ for those user agents that do not support 
frames or are configured not to display frames. 


mmmm element 


" < ! [ %HTMIi : Frame set ; "[ 

<! ENTITY % noframes .content "(BODY) - (NOFRAMES) " > 
*]]> 

< ! ENTITY % noframes .content " (%f low; ) * " > 


<! ELEMENT NOFRAMES - - %noframes . content ; 

alternate content container for non frame-based rendering --> 
< ! ATTLIST NOFRAMES 

%attrs; %coreattrs, %il8n, %events -- 

> 
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-Attributes defined elsewhere 

• id, class (document-wide identifiers [p.71] ) 

• lang (language information [p.79] ), dir (text direction [p.82] ) 

• title (element title [p.63] ) . 

• style (inline style information [p.186] ) 

• onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic 

• events [p.254] ) 

The noframes element specifies content that should be displayed only by user 
agents that do not support frames or are configured not to display frames. User 
agents that support frames must only display the contents of a noframes 
declaration when configured not to display frames. User agents that do not support 
frames must display the contents of noframes in any case. 

The noframes element is part of both the transitional and frameset DTDs, [p.60] 
In a document that uses the frameset DTD, noframes may be used at the end of 
the FRAMESET section of the document. 

For example: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset //EN" 
"http : //www . w3 . org/TR/html4/ frameset . dtd" > 
< HTML > 
<HEAD> 

<TITLE>A frameset document with NOFRAMES< /TITLE > 

• </HEAD> 

< FRAMESET cols= n 50% / 50%"> 
< FRAME src= "main .html" > 
< FRAME src="table_of_contents .html"> 
<NOFRAMES> 

<P>Here is the <A href ="main-nof rames.html "> 

non-frame based version of the document . </A> 

< /NOFRAMES > 
</FRAMESET> 
</HTML> 

*■ 

noframes may be used, for example, in a document that is the source of a frame 
and that uses the transitional DTD. This allows authors to explain the document's 
purpose in cases when it is viewed out of the frameset or with a user agent that 
doesn't support frames. 


The longdesc attribute allows authors to make frame documents more accessible 
to people using non-visual user agents. This attribute designates a resource that 
provides a long description of the frame. Authors should note that long descriptions 
associated with frames are attached to the frame, not the frame's contents. Since 
the contents may vary over time, the initial long description is likely to become 
inappropriate for the frame's later contents. In particular, authors should not include 
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an image as the sole content of a frame. 

^The following frameset document describes two frames. The left frame contains a 
table of contents and the right frame initially contains an image of an ostrich: 

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Frameset //EN" 

"http://www.w3 .org/TR/html4/f rameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>A poorly-designed frameset document < /TITLE > 
</HEAD> 

< FRAMESET cols="20%, 80%" > 
• < FRAME src="table_of_contents.html"> 

< FRAME src="ostrich.gif " longdesc= "ostrich-desc . html " > 
</FRAMESET> 
</HTML> 

Note that the image has been included in the frame independently of any HTML 
element, so the author has no means of specifying alternate text other than via the 
longdesc attribute. If the contents of the right frame change (e.g., the user selects 
a rattlesnake from the table of contents), users will have no textual access to the 
frame's new content. 

Thus, authors should not put an image directly in a frame. Instead, the image 
should be specified in a separate HTML document, and therein annotated with the 
appropriate alternate text: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 

"http://www.w3 . org/TR/html4/ frameset .dtd"> 
<HTML> 
<HEAD> 

*<TITLE>A well -designed frameset document < /TITLE > 
</HEAD> 

< FRAMESET cols="20% / 80%"> 

< FRAME src= " table_of ^content s . html " > 

< FRAME src= "ostrich- container . html " > 
</FRAMESET> 
</HTML> 

<!-- In ostrich-container.html: --> 
<HTML> 
„<HEAD> 

<TITLE>The fast and powerful ostrich</TITLE> 

</HEAD> 

<P> 

<OBJECT data="ostrich.gif " type=" image/gif " > 

These ostriches sure taste good! 

</OBJECT> 

</HTML> 
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16/5 Inline frames: the x frame element 


< ! E LEMENT ■ ' IFRAME 
<!ATTLIST IFRAME 


:c : ^ : :(:%fibw; : ) * : : 


%coreattrs; 



longdesc 

%URI; 

#IMPLIED 

name 

CDATA 

#IMPLIED 

src 

%URI; 

^IMPLIED 

f rameborder 

(i|o) 

1 

marginwidth 

%Pixels; 

#IMPLIED 

marginheight 

%Pixels; 

#IMPLIED 

scrolling 

(yes | no | auto) 

auto 

align 

% I Align ; 

#IMPLIED 

height 

% Length ; 

#IMPLIED 

width 

% Length; 

#IMPLIED 


in 1 i ne : ' s ubw i ndo w - - > 

id, class, style, title -- 

link to long description 

(complements title) -- 

name of frame for targetting 

source of frame content -- 

request frame borders? 

margin widths in pixels -- 

margin height in pixels 

scrollbar or none -- 

vertical or horizontal alignment 

frame height 

frame width -- 


Attribute definitions 


longdesc = ur/[p.51] [CT] [p.49] 

This attribute specifies a link to a long description of the frame. This description 

should supplement the short description provided using the title attribute, and 
* is particularly useful for non-visual user agents, 
name = CGfate [p.50] [CI] [p.49] 

This attribute assigns a name to the current frame. This name may be used as 

the target of subsequent links, 
width = length [p.52] [CN] [p.49] 

The width of the inline frame, 
height = length [p.52] [CN] [p.49] 

The height of the inline frame. 

Attributes defined elsewhere 


• id, class (document-wide identifiers [p.71] ) 

• title (element title [p.63] ) 

• style (inline style information [p.186] ) 

• name, src, f rameborder, marginwidth, marginheight, scrolling 
(frame controls and decoration [p.209] ) 

align (alignment [p.195] ) 

The iframe element allows authors to insert a frame within a block of text. Inserting 
an inline frame within a section of text is much like inserting an object via the 
object element: they both allow you to insert an HTML document in the middle of 
another, they may both be aligned with surrounding text, etc. 

The information to be inserted inline is designated by the src attribute of this 
element. The contents of the iframe element, on the other hand, should only be 
displayed by user agents that do not support frames or are configured not to display 
frames. 
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For user agents that support frames, the following example will place an inline 
frame surrounded by a border in the middle of the text. 

< I FRAME src="foo.html" width="400" height = »' 500" 

scroll ing= "auto" f rame border =" 1" > 
[Your user agent does not support frames or is currently configured 
not to display frames. However, you may visit 
° <A href ="foo. html" >the related document . </A>] 
< /I FRAME > 

Inline frames may not be resized (and thus, they do not take the noresize 
attribute). 

Note. HTML documents may also be embedded in other HTML documents with 
the object element. See the section on embedded documents [p.173] for details. 
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